<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
  <meta name="referrer" content="no-referrer">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>Test</title>
  <style media="screen">
      a{
        cursor: pointer;
      }
  </style>
</head>

<body>

  <article id="app">

  </article>
  <!-- <h1>history</h1>
  <a class="api a">a.html</a>
  <a class="api b">b.html</a>
  <h1>hash</h1>
  <a class="hash a">a.html</a>
  <a class="hash b">b.html</a> -->
</body>
<script type="text/javascript">
  document.querySelectorAll('.api').forEach(item=>{
    item.addEventListener('click',e=>{
      e.preventDefault()
      let link=item.textContent
      window.history.pushState({name:'api'},link,link)
    })
  })
  window.addEventListener('popstate',e=>{
    console.log('location:'+location.href);
    console.log('state:',e.state);
  })
</script>
<script type="text/javascript">
  document.querySelectorAll('.hash').forEach(item=>{
    item.addEventListener('click',e=>{
      e.preventDefault()
      let link=item.textContent
      // window.history.pushState({name:'api'},link,link)
      location.hash=link
    })
  })
  window.addEventListener('popstate',e=>{
    console.log('location:'+location.href);
    console.log('hash:',location.hash);
  })
</script>
</html>
